<!--
* description: 展车订单配置-批量配车
* author: wangjuan
* createdDate:
-->
<template>
  <section class="editBatchSupplyCar">
    <el-dialog
      v-dialogDrag
      :visible="popupsVisible"
      :append-to-body="true"
      width="70%"
      :close-on-click-modal="false"
      @close="close"
    >
      <dialogHeader slot="title" :title="topName" :style-type="$store.state.app.dialogType" />
      <p>配车失败的原因：1、当前配置中心库库存不足；2、城市指定对应的厂牌型号导致配不上车!</p>
      <one-table-template
        ref="multipleTable"
        :dynamic-buttons="tableButtons"
        :dynamic-api-config="apiConfig"
        :dynamic-table-cols="tableCols"
        :dynamic-form-fields="formField"
        :dynamic-is-show-more-btn="false"
        :dynamic-is-show-select="false"
        :dynamic-is-init-table="true"
        :dynamic-table-defult-height="350"
      />

      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in dynamicButtons"
          :key="comp.compKey"
          :type="comp.type"
          :icon="comp.icon"
          :fixed="true"
          @click="comp.clickEvent"
        >{{ comp.text }}</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/popupsOneTable'
import api from '@/api/belowInfo'
import Vue from 'vue'

export default {
  components: {
    OneTableTemplate,
    dialogHeader: () => import('@/components/dialogHeader') // 弹窗标题
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],

  props: {
    popupsVisible: { type: Boolean, default: false }
  },

  beforeRouteEnter(to, from, next) {
    Vue.prototype.$ConfigCache.CacheConfig.initData(
      // 同时加载当前页面和编辑框页面的配置
      [to.path, ''],
      function() {
        next()
      })
  },
  data() {
    const viewPageCode = this.$route.path
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode])

    return {
      topName: '批量配车',

      // 保存API配置对象
      apiConfig: api.queryStore,
      // 动态组件-按钮
      dynamicButtons: [
        {
          compKey: 'btnKey1',
          type: 'primary',
          size: 'small',
          icon: 'iconfont icon-confirm',
          clickEvent: () => this.confirm(),
          text: this.$t('sys.button.confirm')
        },
        {
          compKey: 'btnKey2',
          size: 'small',
          icon: 'iconfont icon-cancel',
          clickEvent: () => this.close(),
          text: this.$t('sys.button.cancel')
        }
      ],

      tableButtons: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableButtons
        : [
          {
            compKey: 'btnKey3',
            size: 'small',
            clickEvent: () => null,
            text: '批量配车'
          }
        ],

      tableCols: this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols.length > 0
        ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].tableCols
        : [
          {
            prop: 'releaseId',
            label: '主键ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'updateControlId',
            label: '并发控制ID',
            hidden: true,
            alwaysHidden: true
          },
          {
            prop: 'carOrder',
            label: '订单编号',
            align: 'center'
          },
          {
            prop: 'belowResult',
            label: '配车结果',
            align: 'center'
          },
          {
            prop: 'orderNumber',
            label: '车系',
            align: 'center'
          },
          {
            prop: 'carConfig',
            label: '基础车型',
            align: 'center'
          },
          {
            prop: 'orderNumber',
            label: '选装包',
            align: 'center'
          },
          {
            prop: 'carConfig',
            label: '车身颜色',
            align: 'center'
          },
          {
            prop: 'orderNumber',
            label: '内饰颜色',
            align: 'center'
          },
          {
            prop: 'VINCode',
            label: 'VIN码',
            align: 'center'
          },
          {
            prop: 'deliveryCenter',
            label: '交付门店',
            align: 'center'
          },
          {
            prop: 'carStatus',
            label: '车辆状态',
            align: 'center'
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center'
          },
          {
            prop: 'creator',
            label: '创建人',
            align: 'center'
          }
        ],

      // 表单数据（无需赋值，由混入对象赋值）
      formField: this.$utils.getFormField(this, {

      }, this.$ConfigCache.CacheConfig.cacheData[viewPageCode])
    }
  },

  created() {

  },

  methods: {
    // 关闭弹窗
    close(type) {
      this.$emit('closebatchSupplyCar', type)
    }
  }
}
</script>

<style scoped>
.promptSpan{
  position: absolute;
  bottom: 26px;
  right: 335px;
  color: #e70020;
}
</style>
